<template>
    <div class="login-next-container">
        <div class="back"></div>
        <div class="choose">请选择您的身份：</div>

        <div class="choose-item">
            <div class="item">
                <span class="left" @click="selectIdentity('student')">
                    <img :src="selectedIdentity === 'student' ? yesImage : noImage" alt="">
                </span>
                <span>
                    <img src="../assets/loginnext/student.png" alt="" class="center">
                </span>
                <span style="font-size: 0.55rem;" class="right">我是学员</span>
            </div>
            <div class="item">
                <span class="left" @click="selectIdentity('teacher')">
                    <img :src="selectedIdentity === 'teacher' ? yesImage : noImage" alt="">
                </span>
                <span class="center"><img src="../assets/loginnext/teacher.png" alt=""></span>
                <span style="font-size: 0.55rem;" class="right">我是教员</span>
            </div>
        </div>
        <div class="choose-in" @click="goPage(type, phone)">
            <span>进入</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const selectedIdentity = ref('student');
import yesImage from '../assets/loginnext/yes.png';
import noImage from '../assets/loginnext/no.png';
import { useRoute, useRouter } from 'vue-router';
import axios from '../api/index';
import { showNotify } from 'vant';
import { useUserStore } from '@/stores/userStore'
import { useStorageInfo } from '@/hooks/useStorageInfo';

const userStore = useUserStore()
userStore.clearUser()


// 如果选择的是学生，type为1
// 如果选择的是老师，type为2
const type = ref(1);
// 手机号
const phone = ref('');
const code = ref('');
const route = useRoute()
const router = useRouter()
phone.value = route.query.phoneNumber;
code.value = route.query.code;
// console.log(phone.value);

const selectIdentity = (identity) => {
    selectedIdentity.value = identity;
    if (identity === 'student') {
        type.value = 1;
    } else {
        type.value = 2;
    }
};

const goPage = async (type, phone,) => {
    // console.log(type, phone);
    if ((type === 1 || type === 2) && phone.length === 11) {
        const res = await axios.post('/page', {
            type,
            phone,
            code
        })
        console.log(res);
        if (res.data.code === '8000') {
            // localStorage.setItem('userInfo', JSON.stringify(res.data.data));
            let userInfo = useStorageInfo('userInfo', {})
            userInfo.value = res.data.data;

            // localStorage.setItem('token', res.data.token);
            userStore.setToken(res.data.token)

            router.push('/home')
        } else if (res.data.code === '8001') {
            showNotify({ type: 'primary', message: '手机号或验证码为空' });
        } else if (res.data.code === '8002') {
            showNotify({ type: 'primary', message: '手机号格式不正确' });
        } else if (res.data.code === '8003') {
            showNotify({ type: 'primary', message: '验证码错误' });
        }

    }


}

</script>

<style lang="less" scoped>
.login-next-container {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    .choose {
        font-size: 0.8rem;
        margin-left: -1rem;
        margin-top: 3.5rem;
    }

    .choose-item {
        width: 80%;
        margin-top: 1.31rem;


        .item {
            height: 2.6rem;
            margin-bottom: 1.3rem;
            border: rgb(233, 157, 66) solid 5px;
            border-radius: 30px;
            display: flex;
            // justify-content: center; // 水平居中
            align-items: center; // 垂直居中

            .left {
                // flex: 1;
                margin: 0 .8rem;
                box-sizing: border-box;
            }

            .center {
                flex: 1;
            }



            .right {
                flex: 1;
                margin: 0 0.2rem;
            }
        }
    }

    .choose-in {
        height: 1.1rem;
        width: 80%;
        background: rgb(255, 191, 107);
        display: flex;
        justify-content: center; // 水平居中
        align-items: center; // 垂直居中

        span {
            // text-align: center;
            color: #fff;
            font-size: 0.53rem;
        }
    }
}
</style>